<template>
  <div class="login">
    <van-nav-bar fixed >
      <template #left>
        <van-icon @click="onBack" name="arrow-left" size="20px" color="gray" style="font-weight: bold;width: 20px"/>
      </template>
      <template #title>
        <span style="color: #FF8800;font-size: 18px">{{loginWay===3?'完善资料':'登录'}}</span>
      </template>
    </van-nav-bar>
    <!-- 登录 -->
    <div class="login-wrapper">
      <!-- 账密登录 -->
      <div v-show="loginWay===1?true:false">
        <van-field
          class="input"
          v-model="account"
          name="用户名"
          placeholder="账号"
        >
          <van-icon name="cross" slot="right-icon" @click="onClearAccount"></van-icon>
        </van-field>

        <van-field
          class="input"
          v-model="password"
          :type="this.isShowPassword?'':'password'"
          name="密码"
          placeholder="密码"
        >
          <van-icon name="closed-eye" slot="right-icon" @click="onShowPassword"></van-icon>
        </van-field>
        <div class="login-btn">
          <van-button round block color="#FF8800" @click="onLoginAccount">登录</van-button>
          <div style="text-align: right;margin:5px 5px;">
            <span style="font-size: 14px;" @click="onGoLoginSMS">短信登录</span>
          </div>
        </div>
      </div>
      <!-- 短信登录 -->
      <div v-show="loginWay===2?true:false" style="text-align: left">
        <van-field
          class="input"
          v-model="countryName"
          name="国家地区"
          right-icon="arrow-down"
          readonly
          @click="choseCountry"
        />
        <van-field
          type="digit"
          class="input"
          v-model="phoneNum"
          name="手机号"
          placeholder="手机号"
          clearable
          label-width="70"
          maxlength="11"
        >
          <template #label>
            <div>
              <span>{{countryCode}}</span>
            </div>
          </template>
        </van-field>
        <van-field
          type="digit"
          class="input"
          v-model="identifyCodeInput"
          name="图形验证码"
          placeholder="图形验证码"
          clearable
          maxlength="4"
        >
          <template #button>
            <div @click="refreshIdentifyCode">
              <Identify slot="button" :identifyCode="identifyCode" @click="refreshIdentifyCode"></Identify>
            </div>
          </template>
        </van-field>
        <van-field
          type="digit"
          class="input"
          v-model="smsCode"
          center
          clearable
          placeholder="短信验证码"
          maxlength="4"
        >
          <template #button>
            <van-button size="small" :disabled="time>0" color="#FF8800" round @click="onGetSMSCode">
              <div v-if="time===0">发送</div>
              <van-count-down style="color: white" v-if="time > 0" :time="time" format="ss" @finish="onTimeOver"/>
            </van-button>
          </template>
        </van-field>
        <div class="login-btn">
          <van-button round block color="#FF8800" @click="onLoginSMS">登录</van-button>
          <div style="text-align: right;margin:5px 5px;">
            <span style="font-size: 14px;" @click="onGoLoginAccount">密码登录</span>
          </div>
        </div>
      </div>
      <!-- 完善信息 -->
      <div v-show="loginWay===3?true:false" style="text-align: left">
        <div style="text-align: center; margin-bottom: 10px" @click="onChangeAvatar">
          <van-image
            round
            width="4rem"
            height="4rem"
            :src="avatar"
          />
          <div style="font-size: 12px; color: #A0A0A0">点击修改头像</div>
        </div>
        <van-field
          label="账号"
          label-width="50px"
          class="input"
          v-model="account"
          placeholder="字母/数字/下划线"
        />
        <van-field
          label="密码"
          label-width="50px"
          class="input"
          v-model="password"
          placeholder="至少6位，含字母数字"
        />
        <van-field
          label="昵称"
          label-width="50px"
          class="input"
          v-model="nick"
          placeholder="汉字/字母/数字/下划线"
        />
        <div style="margin: 10px 16px">
          <van-radio-group v-model="gender"  @change="onChoseGender" direction="horizontal">
           <span style="margin-right: 20px">性别</span>
            <van-radio name="1" checked-color="#FF8800">帅哥</van-radio>
            <van-radio name="2" checked-color="#FF8800">美女</van-radio>
            <van-radio name="3" checked-color="#FF8800">保密</van-radio>
          </van-radio-group>
        </div>
        <van-divider :style="divStyle"></van-divider>
        <div class="login-btn">
          <van-button round block color="#FF8800" @click="onSave">保存</van-button>
        </div>
      </div>
    </div>
    <!-- 第三方登录 -->
    <div v-if="loginWay<3" class="login-other-wrapper">
      <van-divider style="font-size: 12px; color: #A0A0A0;">第三方登录</van-divider>
      <div @click="onLoginWechat">
        <van-icon size="40" :name="require('../../assets/icon/wechat.png')"></van-icon>
      </div>
    </div>
    <!-- 选择国家 -->
    <CountryChose :show="isShowCountry" :onShowChange="onCountryShowChange" :onChose="onCoutryChose"></CountryChose>
  </div>
</template>

<script>
import Identify from '../../components/Identify'
import CountryChose from '../../components/CountryChose'
export default {
  name: 'Login',
  components: {
    Identify: Identify,
    CountryChose: CountryChose
  },
  data () {
    return {
      loginWay: 2, // 登录方式 1账密 2短信 3完善信息
      account: 'antegg', // 账号
      password: '123456', // 密码
      phoneNum: '', // 电话
      identifyCodeInput: '',
      identifyCode: 'EF89', // 图形验证码
      identifyCodes: '123456789',
      time: 0, // 短信获取倒计时
      smsCode: '', // 短信验证码
      isShowPassword: false, // 是否显示密码
      isShowCountry: false, // 是否展示国家
      countryName: '中国', // 名称
      countryCode: '+86', // 区号
      avatar: 'user-o', // 头像
      // 头像列表
      avatarList: [
        'http://laoapp.antegg.net/avatar/secret.png',
        'http://laoapp.antegg.net/avatar/male.png',
        'http://laoapp.antegg.net/avatar/female.png'
      ],
      nick: '', // 昵称
      gender: '', // 性别
      divStyle: { padding: '0 0 0 16px' }
    }
  },
  methods: {
    login (req) {
      // 遮罩
      this.$toast.loading({
        message: '登录中...',
        // overlay: true,
        forbidClick: true,
        loadingType: 'spinner'
      })
      this.$api.loginReq(req).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            // token设置下
            resp.userInfo.token = resp.token
            // 本地存储
            this.$localStore.setUser(resp.userInfo)
            // 内存存储
            this.$store.commit('SetUser', resp.userInfo)
            if (!resp.userInfo.account) {
              this.account = ''
              this.password = ''
              this.loginWay = 3 // 完善资料
            } else {
              // this.$toast('登录成功')
              // 返回
              setTimeout(() => {
                this.$toast.clear()
                this.onBack()
              }, 1000)
            }
          } else {
            setTimeout(() => {
              this.$toast.clear()
              this.$toast(resp.errMsg)
            }, 1000)
          }
        }
      ).catch((err) => {
        this.$toast.clear()
        console.log('======', err)
        this.$toast('登录失败')
      }
      )
    },
    // 账密登录
    onLoginAccount () {
      if (!this.account) {
        this.$toast('请输入账号')
        return
      }
      if (!this.password) {
        this.$toast('请输入密码')
        return
      }
      let req = {
        type: 1,
        account: this.account,
        password: this.password,
        countryCode: '',
        phoneNum: '',
        smsCode: ''
      }
      this.login(req)
    },
    // 清除账号
    onClearAccount () {
      this.account = ''
    },
    // 显示密码
    onShowPassword () {
      this.isShowPassword = !this.isShowPassword
    },
    // 短信登录
    onLoginSMS () {
      if (!this.phoneNum.length) {
        this.$toast('请输入手机号')
        return
      }
      if (!this.phoneNum.length) {
        this.$toast('请输入短信验证码')
        return
      }
      let req = {
        type: 2,
        account: '',
        password: '',
        countryCode: this.countryCode,
        phoneNum: this.phoneNum,
        smsCode: this.smsCode
      }
      this.login(req)
    },
    // 微信登录
    onLoginWechat () {

    },
    // 立即注册
    onGoRegister () {
      this.$router.push('/register')
    },
    // 切换账密登录
    onGoLoginAccount () {
      this.loginWay = 1
    },
    // 切换短信登录
    onGoLoginSMS () {
      this.loginWay = 2
    },
    // 生成图形验证码
    makeIdentifyCode (cnt) {
      this.identifyCode = ''
      for (let i = 0; i < cnt; i++) {
        this.identifyCode += this.identifyCodes[this.$util.randomNum(0, this.identifyCodes.length)]
      }
    },
    // 刷新图形验证码
    refreshIdentifyCode () {
      this.makeIdentifyCode(4)
    },
    // 选择国家
    choseCountry () {
      this.isShowCountry = true
    },
    // 确认选择
    onCoutryChose (item) {
      this.countryName = item.name
      this.countryCode = item.code
      this.isShowCountry = false
    },
    // 获取短信验证码
    onGetSMSCode () {
      if (!this.phoneNum.length) {
        this.$toast('手机号错误')
        return
      }
      if (this.identifyCodeInput !== this.identifyCode) {
        this.$toast('图形验证码错误')
        return
      }
      this.$api.getSmsCodeReq({
        type: 0,
        countryCode: this.countryCode,
        phoneNum: this.phoneNum
      }).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            this.time = 60 * 1000
            this.smsCode = '8888'
            this.$toast('发送成功')
          }
        }
      ).catch()
    },
    // 短信倒计时结束
    onTimeOver () {
      this.time = 0
    },
    // 显示状态变化
    onCountryShowChange (val) {
      this.isShowCountry = val
    },
    // 返回
    onBack () {
      this.$router.back()
    },
    // 性别选择
    onChoseGender (val) {
      this.avatar = this.avatarList[parseInt(val)]
    },
    // 保存资料
    onSave () {
      if (!this.account) {
        this.$toast('请填写账号')
        return
      }
      if (!this.password) {
        this.$toast('请填写密码')
        return
      }
      if (!this.nick) {
        this.$toast('请填写昵称')
      }
      if (!this.gender) {
        this.$toast('请选择性别')
      }
      let req = {
        account: this.account,
        password: this.password,
        nick: this.nick,
        gender: parseInt(this.gender),
        avatar: this.avatar
      }
      this.$api.fillUserInfoReq(req).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            this.$toast('保存成功')
            // token设置下
            resp.userInfo.token = resp.token
            // 本地存储
            this.$localStore.setUser(resp.userInfo)
            // 内存存储
            this.$store.commit('SetUser', resp.userInfo)
            // 返回
            setTimeout(() => {
              this.$toast.clear()
              this.onBack()
            }, 2000)
          } else {
            this.$toast(resp.errMsg)
          }
        }
      ).catch((err) => {
        console.log('======', err)
        this.$toast('保存失败')
      }
      )
    },
    onChangeAvatar () {
      this.$toast('敬请期待')
    }
  },
  mounted () {
    this.refreshIdentifyCode()
  }
}
</script>

<style scoped>
  .login {
  }
  .login-wrapper {
    margin: 60px 20px;
    background-color: white;
  }
  .register-wrapper {
    padding: 60px 20px;
    margin: 0 auto;
  }
  .login-other-wrapper{
    position: absolute;
    width: 100%;
    bottom: 10px;
  }
  .input{
    margin-bottom: 0px;
    font-size: 16px;
  }
  .login-btn{
    margin: 20px 10px;
  }

</style>
